<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <App/>
    </div>
    <script>
        Vue.config.productionTip = false;
        
        // 1.在Vue中使用Vue。extend({})创建组件，extend方法接受一个配置对象(和newVue接受的 配置对象类似)
        const App = Vue.extend({
            // 组件都是独立的，和vm的配置类似(没有el,因为所有组件最后是App的后代组件，App最终都会放在vm实例上被渲染在VM的模板中，el的模板最后在el的容器中渲染)
            template:`
                <div>
                    <h1>App组件{{count}}</h1>
                    <button @click="changeCount">累加</button>
                </div>
            `,
            data() {
                return {
                    count:0,
                }
            },
            methods: {
                changeCount(){
                    // 组件中的函数的this指向当前组件的实例对象
                    console.log(this,"this");
                    this.count++;
                },
            },
        });
        //Vue.extend方法返回一个VueComponent的构造函数，当这个组件被注册并使用的时候会实例化得到一个组件实例(组件实例化对象)
        console.log(App,"App");
        const vm=new Vue({
            el:"#app",
            data(){
                return{};
            },
            // 2.注册组件（注册完成以后，在模板使用组件）
            components:{
                App,
            }
        })
       
</script>
</body>

</html>